<template>
  <div>
    <!-- 图表下 对应的表格 -->
                <!-- :show-header="false" -->
    <div class="my_table">
      <el-tabs v-model="activeName" @tab-click="handleClick" id="tabsbox">
        <el-tab-pane label="缺陷总产量百分比统计" name="first">
          <!-- 柱状图 -->
          <div id="myChart"></div>
          <div class="first_table">
            <div class="first_table_item">
              <!-- 年  度数据表格 -->
              <div>
                <el-table
                  :data="this.yiedate"
                  border
                  size="small"
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 11px"
                >
                  <!--插入表格 -->
                  <el-table-column size="small" width="100">
                    <template scope="scope">
                      <span>{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column width="60" :label="this.yiedate[0].year_1_date"
                  >
                    <template scope="scope">
                      <span>{{ scope.row.year_1 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!--季度 数据表格 -->
              <div>
                <el-table
                  :data="this.quartdate"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 11px"
                >
                  <!--插入表格 -->
                  <!-- 一 季度 -->
                  <el-table-column > </el-table-column>
                  <el-table-column 
                  :label="this.quartdate[0].quarter_1_date"
                  >
                    <template scope="scope">
                      <span>{{ scope.row.quarter_1 }}</span>
                    </template>
                  </el-table-column>

                  <!-- 二季度 -->
                  <el-table-column :label="this.quartdate[0].quarter_2_date">
                      <template scope="scope">
                      <span>{{ scope.row.quarter_2 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column></el-table-column>
                </el-table>
              </div>
              <!-- 月份 数据表格 -->
              <div>
                <el-table
                  :data="this.monthdate"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 11px"
                >
                  <!--插入表格 -->
                  <!-- 1 月 -->
               
                  <el-table-column :label="this.monthdate[0].month_1_date">
                    <template scope="scope">
                      <span>{{ scope.row.month_1 }}</span>
                    </template>
                  </el-table-column>
               
                  <el-table-column :label="this.monthdate[0].month_2_date">
                    <template scope="scope">
                      <span>{{ scope.row.month_2 }}</span>
                    </template>
                  </el-table-column>
               
                  <el-table-column :label="this.monthdate[0].month_3_date">
                    <template scope="scope">
                      <span>{{ scope.row.month_3 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!--周  数据表格 -->
              <div>
                <el-table
                  :data="this.weekdate"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 11px"
                >
                  <!--1 周-->
                  <el-table-column></el-table-column>
      
                  <el-table-column :label="this.weekdate[0].week_1_date">
                    <template scope="scope" >
                      <span>{{ scope.row.week_1 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 2周 -->
               
                  <el-table-column :label="this.weekdate[0].week_2_date">
                    <template scope="scope">
                      <span>{{ scope.row.week_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3周 -->
                 
                  <el-table-column :label="this.weekdate[0].week_3_date">
                    <template scope="scope">
                      <span>{{ scope.row.week_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 4周 -->
 
                  <el-table-column :label="this.weekdate[0].week_4_date">
                    <template scope="scope" >
                      <span>{{ scope.row.week_4 }}</span>
                    </template>
                  </el-table-column>

                    <el-table-column></el-table-column>
                </el-table>
              </div>
              <!-- 天  数据表格 -->
              <div>
                <el-table
                  :data="this.daydate"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '10px', width: '20px' }"
                  style="font-size:10px"
                >
                  <!-- 1 天 -->
                 
                  <el-table-column  :label="this.daydate[0].day_1_date" >
                    <template scope="scope">
                      <span>{{ scope.row.day_1 }}</span>
                    </template>
                  </el-table-column>
                  <!--2 天 -->
                
                  <el-table-column :label="this.daydate[0].day_2_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3天 -->
                  <el-table-column :label="this.daydate[0].day_3_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 4天 -->
                  <el-table-column :label="this.daydate[0].day_4_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_4 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 5天 -->
                  <el-table-column :label="this.daydate[0].day_5_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_5 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 6天 -->
                  <el-table-column :label="this.daydate[0].day_6_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_6 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 7天 -->
                 
                  <el-table-column :label="this.daydate[0].day_7_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_7 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="缺陷个数量统计" name="second">
          <!-- 第二个柱状图 -->
          <div id="my_second"></div>
          <div class="second_table">
            <div class="second_table_item">
              <!-- 年度 -->
              <div>
                <el-table
                  :data="this.yienum"
                  border
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  size="small"
                  style="font-size: 10px"
                >
                  <!--插入表格 -->
                  <el-table-column size="small" width="60">
                    <template scope="scope">
                      <span>{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column :label="this.yienum[0].year_1_date">
                    <template scope="scope">
                      <span>{{ scope.row.year_1 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- 季度 -->
              <div>
                <el-table
                  :data="this.quartnum"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 10px"
                >
                  <!--插入表格 -->
                  <!-- 一 季度 -->
                   <el-table-column> 
                   
                  </el-table-column>
                  <el-table-column :label="this.quartnum[0].quarter_1_date">
                    <template scope="scope">
                      <span>{{ scope.row.quarter_1 }}</span>
                    </template>
                  </el-table-column>

                  <!-- 二季度 -->
                
                  <el-table-column :label="this.quartnum[0].quarter_2_date">
                    <template scope="scope">
                      <span>{{ scope.row.quarter_2 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column></el-table-column>
                </el-table>
              </div>
              <!--月度 -->
              <div>
                <el-table
                  :data="this.monthnum"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 10px"
                >
                  <!--插入表格 -->
          
                  <el-table-column :label="this.monthnum[0].month_1_date">
                    <template scope="scope">
                      <span>{{ scope.row.month_1 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 2 月 -->
              
                  <el-table-column :label="this.monthnum[0].month_2_date">
                    <template scope="scope">
                      <span>{{ scope.row.month_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3 月 -->
          
                  <el-table-column :label="this.monthnum[0].month_3_date">
                    <template scope="scope">
                      <span>{{ scope.row.month_3 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column></el-table-column>
                </el-table>
              </div>
              <!-- 周  -->
              <div>
                <el-table
                  :data="this.weeknum"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 10px"
                >
                  <!--1 周-->
                
                  <el-table-column :label="this.weeknum[0].week_1_date">
                    <template scope="scope">
                      <span>{{ scope.row.week_1 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 2周 -->
               
                  <el-table-column :label="this.weeknum[0].week_2_date">
                    <template scope="scope">
                      <span>{{ scope.row.week_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3周 -->
                 
                  <el-table-column :label="this.weeknum[0].week_3_date">
                    <template scope="scope">
                      <span>{{ scope.row.week_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 4周 -->
               
                  <el-table-column :label="this.weeknum[0].week_4_date">
                    <template scope="scope">
                      <span>{{ scope.row.week_4 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- 天 -->
              <div>
                <el-table
                  :data="this.daynum"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 10px"
                >
                <el-table-column></el-table-column>
                  <!-- 1 天 -->
                 
                  <el-table-column   :label="this.daynum[0].day_1_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_1 }}</span>
                    </template>
                  </el-table-column>
                  <!--2 天 -->
             
                  <el-table-column :label="this.daynum[0].day_2_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3天 -->
                 
                  <el-table-column  :label="this.daynum[0].day_3_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 4天 -->
                 
                  <el-table-column :label="this.daynum[0].day_4_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_4 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 5天 -->
                 
                  <el-table-column :label="this.daynum[0].day_5_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_5 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 6天 -->
               
                  <el-table-column :label="this.daynum[0].day_6_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_6 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 7天 -->
               
                  <el-table-column :label="this.daynum[0].day_7_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_7 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="缺陷/NG总数量" name="third">
          <!-- 第三个柱状图 -->
          <div id="mythreebar"></div>
          <div class="third_table">
            <div class="third_table_item">
              <!-- 年度 -->
              <div>
                <el-table
                  :data="this.yieNg"
                  border
                  size="small"
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 11px"
                >
                  <!--插入表格 -->
                  <el-table-column size="small" width="60">
                    <template scope="scope">
                      <span>{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>
                
                  <el-table-column :label="this.yieNg[0].year_1_date">
                    <template scope="scope">
                      <span>{{ scope.row.year_1 }}</span>
                    </template>
                  </el-table-column>

                     <el-table-column></el-table-column>
                </el-table>
              </div>
              <!-- 季度 -->
              <div>
                <el-table
                  :data="this.quartNg"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 11px"
                >
                  <!--插入表格 -->
                  <!-- 一 季度 -->

                  <el-table-column :label="this.quartNg[0].quarter_1_date">
                    <template scope="scope">
                      <span>{{ scope.row.quarter_1 }}</span>
                    </template>
                  </el-table-column>

                  <!-- 二季度 -->
                
                  <el-table-column :label="this.quartNg[0].quarter_2_date">
                    <template scope="scope">
                      <span>{{ scope.row.quarter_2 }}</span>
                    </template>
                  </el-table-column>
                       <el-table-column></el-table-column>
                </el-table>
              </div>
              <!-- 月份 -->
              <div>
                <el-table
                  :data="this.monthNg"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 11px"
                >
                  <!--插入表格 -->
                  <!-- 1 月 -->
                  <el-table-column :label="this.monthNg[0].month_1_date">
                    <template scope="scope">
                      <span>{{ scope.row.month_1 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 2 月 -->
                 
                  <el-table-column :label="this.monthNg[0].month_2_date">
                    <template scope="scope">
                      <span>{{ scope.row.month_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3 月 -->
                 
                  <el-table-column :label="this.monthNg[0].month_3_date">
                    <template scope="scope">
                      <span>{{ scope.row.month_3 }}</span>
                    </template>
                  </el-table-column>
                   <el-table-column></el-table-column>
                </el-table>
              </div>
              <!-- 周  -->
              <div>
                <el-table
                  :data="this.weekNg"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 11px"
                >
                  <!--1 周-->
                  
                  <el-table-column :label="this.weekNg[0].week_1_date">
                    <template scope="scope">
                      <span>{{ scope.row.week_1 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 2周 -->
                 
                  <el-table-column :label="this.weekNg[0].week_2_date">
                    <template scope="scope">
                      <span>{{ scope.row.week_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3周 -->
                 
                  <el-table-column :label="this.weekNg[0].week_3_date">
                    <template scope="scope">
                      <span>{{ scope.row.week_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 4周 -->
                
                  <el-table-column :label="this.weekNg[0].week_4_date">
                    <template scope="scope">
                      <span>{{ scope.row.week_4 }}</span>
                    </template>
                  </el-table-column>
                    <el-table-column></el-table-column>
                </el-table>
              </div>
              <!-- 天 -->
              <div>
                <el-table
                  :data="this.dayNg"
                  highlight-current-row
                  size="small"
                  border
                  :row-style="{ height: '60px' }"
                  :cell-style="{ padding: '0px', width: '20px' }"
                  style="font-size: 10px"
                >
                  <!-- 1 天 -->
              
                  <el-table-column :label="this.dayNg[0].day_1_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_1 }}</span>
                    </template>
                  </el-table-column>
                  <!--2 天 -->
                
                  <el-table-column :label="this.dayNg[0].day_2_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_2 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 3天 -->
                  
                  <el-table-column  :label="this.dayNg[0].day_3_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_3 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 4天 -->
                
                  <el-table-column :label="this.dayNg[0].day_4_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_4 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 5天 -->
                 
                  <el-table-column :label="this.dayNg[0].day_5_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_5 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 6天 -->
                 
                  <el-table-column :label="this.dayNg[0].day_6_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_6 }}</span>
                    </template>
                  </el-table-column>
                  <!-- 7天 -->
               
                  <el-table-column :label="this.dayNg[0].day_7_date">
                    <template scope="scope">
                      <span>{{ scope.row.day_7 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      activeName: "first",
      list: [],
      listyie: [],
      listquadate: [],
      defectPercent: [],
      yiedate: [],
      quartdate: [],
      monthdate: [],
      weekdate: [],
      daydate: [],
      myChart: "",
      yienum: [],
      quartnum: [],
      monthnum: [],
      weeknum: [],
      daynum: [],
      yieNg: [],
      quartNg: [],
      monthNg: [],
      weekNg: [],
      dayNg: [],

      inYield:[],
    };
  },
  created() {
        axios({
          url: "http://10.1.108.175:7183/get",
          method: "GET",
          params: {
            data:this.formInline,
          }
         }).then(res => {
           console.log(res.data); 
           let  defectstatistics = res.data;
           sessionStorage.setItem('defectstatistics',JSON.stringify(defectstatistics))
        })
      // 缺陷总产量百分比统计
    let defectbar = sessionStorage.getItem("defectstatistics");
    let barlist = JSON.parse(defectbar)
    console.log('11111111111',barlist)
    this.inYield = barlist.inYield;
    if(this.inYield){
       console.log('我他妈有数据了')
    }
    // let temp = JSON.parse(socketlist);
    // this.defectPercent = temp.inYield;
    // // console.log(this.defectPercent)
    // this.yiedate = this.defectPercent.year;
    // this.quartdate = this.defectPercent.quarter;
    // this.monthdate = this.defectPercent.month;
    // this.weekdate = this.defectPercent.week;
    // this.daydate = this.defectPercent.day;
  
    // // 缺陷个数统计
    // let defectnum = temp.defectNum;
    // this.yienum = defectnum.year;
    // this.quartnum = defectnum.quarter;
    // this.monthnum = defectnum.month;
    // this.weeknum = defectnum.week;
    // this.daynum = defectnum.day;
    // // 缺陷Ng统计
    // let defectNg = temp.inNg;
    // this.yieNg = defectNg.year;
    // this.quartNg = defectNg.quarter;
    // this.weekNg = defectNg.week;
    // this.monthNg = defectNg.month;
    // this.dayNg = defectNg.day;
  },
  mounted() {
   


    this.getlist("myChart");
    this.myhistogram();
    this.theerbra();
  },
  beforeUpdate() {
    if(this.inYield){
        console.log("数据回来后到更新阶段");
      this.getlist("myChart");
    }
    this.myhistogram();
    this.theerbra();

   
    
  },
  watch: {
    option: {
      deep: true,
      hanlder: function (newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal, true);
          } else {
            this.myChart.setOption(oldVal, true);
          }
        } else {
          this.init();
        }
      },
    },
  },
  sockets: {
    errorcodelist(data) {
      if (data.length == 0) {
        this.$alert("查询结果未能返回，请重新输入", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        this.list = JSON.parse(data);
        // console.log("数据回到前端", this.list);
        this.yiedate = this.list.inYield.year; //缺陷总产量百分比统计
        this.quartdate = this.list.inYield.quarter;
        this.monthdate = this.list.inYield.month;
        this.weekdate = this.list.inYield.week;
        this.daydate = this.list.inYield.day;

        this.yienum = this.list.defectNum.year; //缺陷个数统计
        this.quartnum = this.list.defectNum.quarter;
        this.monthnum = this.list.defectNum.month;
        this.weeknum = this.list.defectNum.week;
        this.daynum = this.list.defectNum.day;
        // console.log("12345676543234567", this.yienum);
        this.yieNg = this.list.inNg.year;
        this.quartNg = this.list.inNg.quarter;
        this.monthNg = this.list.inNg.month;
        this.weekNg = this.list.inNg.week;
        this.dayNg = this.list.inNg.day;
        sessionStorage.setItem("setlist", JSON.stringify(this.list));
        // localStorage.setItem("setlist", JSON.stringify(this.list));
      }
    },
  },
  methods: {
    // 第一个柱状图
    getlist(id) {
      // console.log('挂载后，数据回来后，赋值并执行方法')
      let echdata = sessionStorage.getItem("defectstatistics");
      let datatemp = JSON.parse(echdata);
      // console.log("222222222222222", datatemp.inYield);
      var keyname = [];
      var listyear = [];
      var Blocklist = [];
      var BrightDotlist = [];
      var Linelist = [];
      var Muralist = [];
      // 年
      var year_a = datatemp.inYield.year;
      listyear.push(year_a[0].year_1);
      Blocklist.push(year_a[1].year_1);
      BrightDotlist.push(year_a[2].year_1);
      Linelist.push(year_a[3].year_1);
      Muralist.push(year_a[4].year_1);
      for (let i = 0; i < year_a.length; i++) {
        keyname.push(year_a[i].name);
      }

      // 季度
      var quarterdata = datatemp.inYield.quarter;
      listyear.push(quarterdata[0].quarter_1);
      listyear.push(quarterdata[0].quarter_2);
      Blocklist.push(quarterdata[1].quarter_1);
      Blocklist.push(quarterdata[1].quarter_2);
      BrightDotlist.push(quarterdata[2].quarter_1);
      BrightDotlist.push(quarterdata[2].quarter_2);
      Linelist.push(quarterdata[3].quarter_1);
      Linelist.push(quarterdata[3].quarter_2);
      Muralist.push(quarterdata[4].quarter_1);
      Muralist.push(quarterdata[4].quarter_2);
      //  console.log(Blocklist)

      // 月度
      var monthtemp = datatemp.inYield.month;

      listyear.push(monthtemp[0].month_1);
      listyear.push(monthtemp[0].month_2);
      listyear.push(monthtemp[0].month_3);
      Blocklist.push(monthtemp[1].month_1);
      Blocklist.push(monthtemp[1].month_2);
      Blocklist.push(monthtemp[1].month_3);
      BrightDotlist.push(monthtemp[2].month_1);
      BrightDotlist.push(monthtemp[2].month_2);
      BrightDotlist.push(monthtemp[2].month_3);
      Linelist.push(monthtemp[3].month_1);
      Linelist.push(monthtemp[3].month_2);
      Linelist.push(monthtemp[3].month_3);
      Muralist.push(monthtemp[4].month_1);
      Muralist.push(monthtemp[4].month_2);
      Muralist.push(monthtemp[4].month_3);

      //  周
      var weektemp = datatemp.inYield.week;
      listyear.push(weektemp[0].week_1);
      listyear.push(weektemp[0].week_2);
      listyear.push(weektemp[0].week_3);
      listyear.push(weektemp[0].week_4);
      Blocklist.push(weektemp[1].week_1);
      Blocklist.push(weektemp[1].week_2);
      Blocklist.push(weektemp[1].week_3);
      Blocklist.push(weektemp[1].week_4);
      BrightDotlist.push(weektemp[2].week_1);
      BrightDotlist.push(weektemp[2].week_2);
      BrightDotlist.push(weektemp[2].week_3);
      BrightDotlist.push(weektemp[2].week_4);
      Linelist.push(weektemp[3].week_1);
      Linelist.push(weektemp[3].week_2);
      Linelist.push(weektemp[3].week_3);
      Linelist.push(weektemp[3].week_4);
      Muralist.push(weektemp[4].week_1);
      Muralist.push(weektemp[4].week_2);
      Muralist.push(weektemp[4].week_3);
      Muralist.push(weektemp[4].week_4);

      // 天
      var daytemp = datatemp.inYield.day;
      listyear.push(daytemp[0].day_1);
      listyear.push(daytemp[0].day_2);
      listyear.push(daytemp[0].day_3);
      listyear.push(daytemp[0].day_4);
      listyear.push(daytemp[0].day_5);
      listyear.push(daytemp[0].day_6);
      listyear.push(daytemp[0].day_7);
      Blocklist.push(daytemp[1].day_1);
      Blocklist.push(daytemp[1].day_2);
      Blocklist.push(daytemp[1].day_3);
      Blocklist.push(daytemp[1].day_4);
      Blocklist.push(daytemp[1].day_5);
      Blocklist.push(daytemp[1].day_6);
      Blocklist.push(daytemp[1].day_7);
      BrightDotlist.push(daytemp[2].day_1);
      BrightDotlist.push(daytemp[2].day_2);
      BrightDotlist.push(daytemp[2].day_3);
      BrightDotlist.push(daytemp[2].day_4);
      BrightDotlist.push(daytemp[2].day_5);
      BrightDotlist.push(daytemp[2].day_6);
      BrightDotlist.push(daytemp[2].day_7);
      Linelist.push(daytemp[3].day_1);
      Linelist.push(daytemp[3].day_2);
      Linelist.push(daytemp[3].day_3);
      Linelist.push(daytemp[3].day_4);
      Linelist.push(daytemp[3].day_5);
      Linelist.push(daytemp[3].day_6);
      Linelist.push(daytemp[3].day_7);
      Muralist.push(daytemp[4].day_1);
      Muralist.push(daytemp[4].day_2);
      Muralist.push(daytemp[4].day_3);
      Muralist.push(daytemp[4].day_4);
      Muralist.push(daytemp[4].day_5);
      Muralist.push(daytemp[4].day_6);
      Muralist.push(daytemp[4].day_7);

      this.myChart = this.$echarts.init(document.getElementById(id));
      this.myChart.setOption({
        option: true,
        title: {
          text: "9线AFI百分缺陷统计",
          left: "center",
          fontWeightL: 300,
          textStyle: {
            lineHeight: 56,
            fontSize: 14,
            manginLeft: 30,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: keyname,
        },
        grid: {
          left: "0%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "年",
            "季度(1)",
            "季度(2)",
            "月份(1)",
            "月份(2)",
            "月份(3)",
            "周(1)",
            "周(2)",
            "周(3)",
            "周(4)",
            "天(1)",
            "天(2)",
            "天(3)",
            "天(4)",
            "天(5)",
            "天(6)",
            "天(7)",
          ],
          left: 10,
        },
        yAxis: {
          type: "value",
          inverse: false,
          // max:10,
          // nameGap:25,
        },
        series: [
          {
            name: "BlackDot",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: listyear,
          },
          {
            name: "Block",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            // data:[20,10,10,10]
            data: Blocklist,
          },
          {
            name: "BrightDot",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: BrightDotlist,
          },
          {
            name: "Line",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Linelist,
          },
          {
            name: "Mura",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Muralist,
          },
        ],
      });
    },

    //  第二个柱状图
    myhistogram() {
      let echdata = sessionStorage.getItem("setlist");
      let datatemp = JSON.parse(echdata);
      // console.log("======================>", datatemp.defectNum);
      var keyname = [];
      var listyear = [];
      var Blocklist = [];
      var BrightDotlist = [];
      var Linelist = [];
      var Muralist = [];
      // 年
      var year_a = datatemp.defectNum.year;
      listyear.push(year_a[0].year_1);
      Blocklist.push(year_a[1].year_1);
      BrightDotlist.push(year_a[2].year_1);
      Linelist.push(year_a[3].year_1);
      Muralist.push(year_a[4].year_1);
      for (let i = 0; i < year_a.length; i++) {
        keyname.push(year_a[i].name);
      }

      // 季度
      var quarterdata = datatemp.defectNum.quarter;
      listyear.push(quarterdata[0].quarter_1);
      listyear.push(quarterdata[0].quarter_2);
      Blocklist.push(quarterdata[1].quarter_1);
      Blocklist.push(quarterdata[1].quarter_2);
      BrightDotlist.push(quarterdata[2].quarter_1);
      BrightDotlist.push(quarterdata[2].quarter_2);
      Linelist.push(quarterdata[3].quarter_1);
      Linelist.push(quarterdata[3].quarter_2);
      Muralist.push(quarterdata[4].quarter_1);
      Muralist.push(quarterdata[4].quarter_2);
      //  console.log(Blocklist)

      // 月度
      var monthtemp = datatemp.defectNum.month;

      listyear.push(monthtemp[0].month_1);
      listyear.push(monthtemp[0].month_2);
      listyear.push(monthtemp[0].month_3);
      Blocklist.push(monthtemp[1].month_1);
      Blocklist.push(monthtemp[1].month_2);
      Blocklist.push(monthtemp[1].month_3);
      BrightDotlist.push(monthtemp[2].month_1);
      BrightDotlist.push(monthtemp[2].month_2);
      BrightDotlist.push(monthtemp[2].month_3);
      Linelist.push(monthtemp[3].month_1);
      Linelist.push(monthtemp[3].month_2);
      Linelist.push(monthtemp[3].month_3);
      Muralist.push(monthtemp[4].month_1);
      Muralist.push(monthtemp[4].month_2);
      Muralist.push(monthtemp[4].month_3);

      //  周
      var weektemp = datatemp.defectNum.week;
      listyear.push(weektemp[0].week_1);
      listyear.push(weektemp[0].week_2);
      listyear.push(weektemp[0].week_3);
      listyear.push(weektemp[0].week_4);
      Blocklist.push(weektemp[1].week_1);
      Blocklist.push(weektemp[1].week_2);
      Blocklist.push(weektemp[1].week_3);
      Blocklist.push(weektemp[1].week_4);
      BrightDotlist.push(weektemp[2].week_1);
      BrightDotlist.push(weektemp[2].week_2);
      BrightDotlist.push(weektemp[2].week_3);
      BrightDotlist.push(weektemp[2].week_4);
      Linelist.push(weektemp[3].week_1);
      Linelist.push(weektemp[3].week_2);
      Linelist.push(weektemp[3].week_3);
      Linelist.push(weektemp[3].week_4);
      Muralist.push(weektemp[4].week_1);
      Muralist.push(weektemp[4].week_2);
      Muralist.push(weektemp[4].week_3);
      Muralist.push(weektemp[4].week_4);

      // 天
      var daytemp = datatemp.defectNum.day;
      listyear.push(daytemp[0].day_1);
      listyear.push(daytemp[0].day_2);
      listyear.push(daytemp[0].day_3);
      listyear.push(daytemp[0].day_4);
      listyear.push(daytemp[0].day_5);
      listyear.push(daytemp[0].day_6);
      listyear.push(daytemp[0].day_7);
      Blocklist.push(daytemp[1].day_1);
      Blocklist.push(daytemp[1].day_2);
      Blocklist.push(daytemp[1].day_3);
      Blocklist.push(daytemp[1].day_4);
      Blocklist.push(daytemp[1].day_5);
      Blocklist.push(daytemp[1].day_6);
      Blocklist.push(daytemp[1].day_7);
      BrightDotlist.push(daytemp[2].day_1);
      BrightDotlist.push(daytemp[2].day_2);
      BrightDotlist.push(daytemp[2].day_3);
      BrightDotlist.push(daytemp[2].day_4);
      BrightDotlist.push(daytemp[2].day_5);
      BrightDotlist.push(daytemp[2].day_6);
      BrightDotlist.push(daytemp[2].day_7);
      Linelist.push(daytemp[3].day_1);
      Linelist.push(daytemp[3].day_2);
      Linelist.push(daytemp[3].day_3);
      Linelist.push(daytemp[3].day_4);
      Linelist.push(daytemp[3].day_5);
      Linelist.push(daytemp[3].day_6);
      Linelist.push(daytemp[3].day_7);
      Muralist.push(daytemp[4].day_1);
      Muralist.push(daytemp[4].day_2);
      Muralist.push(daytemp[4].day_3);
      Muralist.push(daytemp[4].day_4);
      Muralist.push(daytemp[4].day_5);
      Muralist.push(daytemp[4].day_6);
      Muralist.push(daytemp[4].day_7);
      let my_second = this.$echarts.init(document.getElementById("my_second"));
      my_second.setOption({
        title: {
          text: "9线AFI百分缺陷统计",
          left: "center",
          fontWeightL: 300,
          textStyle: {
            lineHeight: 56,
            fontSize: 14,
            manginLeft: 30,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: keyname,
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "年",
            "季度(1)",
            "季度(2)",
            "月份(1)",
            "月份(2)",
            "月份(3)",
            "周(1)",
            "周(2)",
            "周(3)",
            "周(4)",
            "天(1)",
            "天(2)",
            "天(3)",
            "天(4)",
            "天(5)",
            "天(6)",
            "天(7)",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "BlackDot",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: listyear,
          },
          {
            name: "Block",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            // data:[20,10,10,10]
            data: Blocklist,
          },
          {
            name: "BrightDot",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: BrightDotlist,
          },
          {
            name: "Line",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Linelist,
          },
          {
            name: "Mura",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Muralist,
          },
        ],
      });
    },

    // 第三个柱状图
    theerbra() {
      let echdata = sessionStorage.getItem("setlist");
      let datatemp = JSON.parse(echdata);
      // console.log("======================>", datatemp.defectNum);
      var keyname = [];
      var listyear = [];
      var Blocklist = [];
      var BrightDotlist = [];
      var Linelist = [];
      var Muralist = [];
      // 年
      var year_a = datatemp.inNg.year;
      listyear.push(year_a[0].year_1);
      Blocklist.push(year_a[1].year_1);
      BrightDotlist.push(year_a[2].year_1);
      Linelist.push(year_a[3].year_1);
      Muralist.push(year_a[4].year_1);
      for (let i = 0; i < year_a.length; i++) {
        keyname.push(year_a[i].name);
      }

      // 季度
      var quarterdata = datatemp.inNg.quarter;
      listyear.push(quarterdata[0].quarter_1);
      listyear.push(quarterdata[0].quarter_2);
      Blocklist.push(quarterdata[1].quarter_1);
      Blocklist.push(quarterdata[1].quarter_2);
      BrightDotlist.push(quarterdata[2].quarter_1);
      BrightDotlist.push(quarterdata[2].quarter_2);
      Linelist.push(quarterdata[3].quarter_1);
      Linelist.push(quarterdata[3].quarter_2);
      Muralist.push(quarterdata[4].quarter_1);
      Muralist.push(quarterdata[4].quarter_2);
      //  console.log(Blocklist)

      // 月度
      var monthtemp = datatemp.inNg.month;

      listyear.push(monthtemp[0].month_1);
      listyear.push(monthtemp[0].month_2);
      listyear.push(monthtemp[0].month_3);
      Blocklist.push(monthtemp[1].month_1);
      Blocklist.push(monthtemp[1].month_2);
      Blocklist.push(monthtemp[1].month_3);
      BrightDotlist.push(monthtemp[2].month_1);
      BrightDotlist.push(monthtemp[2].month_2);
      BrightDotlist.push(monthtemp[2].month_3);
      Linelist.push(monthtemp[3].month_1);
      Linelist.push(monthtemp[3].month_2);
      Linelist.push(monthtemp[3].month_3);
      Muralist.push(monthtemp[4].month_1);
      Muralist.push(monthtemp[4].month_2);
      Muralist.push(monthtemp[4].month_3);

      //  周
      var weektemp = datatemp.inNg.week;
      listyear.push(weektemp[0].week_1);
      listyear.push(weektemp[0].week_2);
      listyear.push(weektemp[0].week_3);
      listyear.push(weektemp[0].week_4);
      Blocklist.push(weektemp[1].week_1);
      Blocklist.push(weektemp[1].week_2);
      Blocklist.push(weektemp[1].week_3);
      Blocklist.push(weektemp[1].week_4);
      BrightDotlist.push(weektemp[2].week_1);
      BrightDotlist.push(weektemp[2].week_2);
      BrightDotlist.push(weektemp[2].week_3);
      BrightDotlist.push(weektemp[2].week_4);
      Linelist.push(weektemp[3].week_1);
      Linelist.push(weektemp[3].week_2);
      Linelist.push(weektemp[3].week_3);
      Linelist.push(weektemp[3].week_4);
      Muralist.push(weektemp[4].week_1);
      Muralist.push(weektemp[4].week_2);
      Muralist.push(weektemp[4].week_3);
      Muralist.push(weektemp[4].week_4);

      // 天
      var daytemp = datatemp.inNg.day;
      listyear.push(daytemp[0].day_1);
      listyear.push(daytemp[0].day_2);
      listyear.push(daytemp[0].day_3);
      listyear.push(daytemp[0].day_4);
      listyear.push(daytemp[0].day_5);
      listyear.push(daytemp[0].day_6);
      listyear.push(daytemp[0].day_7);
      Blocklist.push(daytemp[1].day_1);
      Blocklist.push(daytemp[1].day_2);
      Blocklist.push(daytemp[1].day_3);
      Blocklist.push(daytemp[1].day_4);
      Blocklist.push(daytemp[1].day_5);
      Blocklist.push(daytemp[1].day_6);
      Blocklist.push(daytemp[1].day_7);
      BrightDotlist.push(daytemp[2].day_1);
      BrightDotlist.push(daytemp[2].day_2);
      BrightDotlist.push(daytemp[2].day_3);
      BrightDotlist.push(daytemp[2].day_4);
      BrightDotlist.push(daytemp[2].day_5);
      BrightDotlist.push(daytemp[2].day_6);
      BrightDotlist.push(daytemp[2].day_7);
      Linelist.push(daytemp[3].day_1);
      Linelist.push(daytemp[3].day_2);
      Linelist.push(daytemp[3].day_3);
      Linelist.push(daytemp[3].day_4);
      Linelist.push(daytemp[3].day_5);
      Linelist.push(daytemp[3].day_6);
      Linelist.push(daytemp[3].day_7);
      Muralist.push(daytemp[4].day_1);
      Muralist.push(daytemp[4].day_2);
      Muralist.push(daytemp[4].day_3);
      Muralist.push(daytemp[4].day_4);
      Muralist.push(daytemp[4].day_5);
      Muralist.push(daytemp[4].day_6);
      Muralist.push(daytemp[4].day_7);
      let mythreebar = this.$echarts.init(
        document.getElementById("mythreebar")
      );
      mythreebar.setOption({
        title: {
          text: "9线AFI百分缺陷统计",
          left: "center",
          fontWeightL: 300,
          textStyle: {
            lineHeight: 56,
            fontSize: 14,
            manginLeft: 30,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: keyname,
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "年",
            "季度(1)",
            "季度(2)",
            "月份(1)",
            "月份(2)",
            "月份(3)",
            "周(1)",
            "周(2)",
            "周(3)",
            "周(4)",
            "天(1)",
            "天(2)",
            "天(3)",
            "天(4)",
            "天(5)",
            "天(6)",
            "天(7)",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "BlackDot",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: listyear,
          },
          {
            name: "Block",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            // data:[20,10,10,10]
            data: Blocklist,
          },
          {
            name: "BrightDot",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: BrightDotlist,
          },
          {
            name: "Line",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Linelist,
          },
          {
            name: "Mura",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Muralist,
          },
        ],
      });
    },

    //  tabls选项卡
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style  scoped>
#myChart {
  width: 1000px;
  height: 360px;
}
.my_table {
  width: 1000px;
  margin: 10px auto;
  margin-left: 0px;
}

#tabsbox {
  margin-left: 10px;
}
.first_table {
  width: 100%;
}
.first_table_item {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: auto;
}
.second_table {
  width: 100%;
}

.second_table_item {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: auto;
}
.third_table {
  width: 100%;
}
.third_table_item {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: auto;
}
#my_second {
  width: 1000px;
  height: 300px;
}
#mythreebar {
  width: 1000px;
  height: 300px;
}
</style>











       

  